<template>
    <!-- 骰子组件 -->
    <view class="dice-wrap">
        <!-- 筛子运动时候的展示的图片 -->
        <image v-if="isDicing" :src="'/static/dice-tag/dong'+aniIndex+'.png'" class="dice-icon"></image>
        <!-- 筛子运动时候的展示的图片 -->

        <!-- 筛子静止时候的显示的对应点数的图片 -->
        <image v-else :src="'/static/dice-tag/'+currentPoint+'.png'" class="dice-icon"></image>
        <!-- 筛子静止时候的显示的对应点数的图片 -->
    </view>
    <!-- 骰子组件 -->
</template>

<script>
import diceTag from './cl-chat-dice-tag.js'
export default {
	props: {
		item: {
			type: Object,
			default: function() {
				return {}
			}
		},
		allItem: {
			type: Object,
			default: function() {
				return {}
			}
		}
	},
    data() {
        return {
            //是否正在掷筛子
            isDicing: false,
            //当前显示的动画图片索引
            aniIndex: 0,
            //当前掷筛子掷到的点数（默认1点）
            currentPoint: 1,
            //定时器
            timer: null,
        }
    },
    beforeDestroy() {
        //组件销毁之前清除定时器
        clearInterval(this.timer)
    },
	mounted() {
		this.currentPoint = this.item.winning_points
		if(!this.item.prodOk){
			this.throwDice()
		}
	},
    methods: {
        //掷骰子
        async throwDice() {
            //如果当前骰子正在滚动则不能掷骰子
            if (this.isDicing) {
                return
            }
            // //从1~6随机一个数
            // this.currentPoint = Math.floor(Math.random() * 6 + 1)
            //开启骰子动画
            await this.startAnimation()
            // //动画完毕之后可以通知父组件当前掷到的点数
            // this.$emit('diceOk',this.msg_id)
			diceTag({
				msg_id:this.allItem.msg_id,
				content_text:this.allItem.content_text
			})
        },
        //开启动画效果
        async startAnimation() {
            return new Promise((resolve) => {
                //设置筛子开始运动
                this.isDicing = true
                //记录动画次数
                let num = 0
                //每隔200毫秒来回切换一张“动”图形成掷骰子的动画
                this.timer = setInterval(() => {
                    let index = this.aniIndex
                    index++
                    if (index >= 4) {
                        index = 0
                    }
                    this.aniIndex = index
                    num++
                    //差不多执行1.6秒钟的时候可以停止了
                    if (num > 8) {
                        //关闭定时器
                        clearInterval(this.timer)
                        //设置骰子停止
                        this.isDicing = false
                        //返回结果
                        resolve(true)
                    }
                }, 200)
            })
        },
    },
}
</script>

<style lang="scss">
.dice-wrap {
    .dice-icon {
		display: block;
        width: 100rpx;
        height: 100rpx;
    }
}
</style>